<!DOCTYPE html>
<html>
<head>
    <title>主题管理</title>
    {% include 'system/common/header.html' %}
</head>
<body class="ppress-container">
<!-- 搜索区域 -->
<div class="layui-card">
    <div class="layui-card-body">
        <form class="layui-form" action="" lay-filter="searchForm">
            <div class="layui-form-item" style="margin-bottom: unset;">
                <label class="layui-form-label">主题名称</label>
                <div class="layui-input-inline">
                    <input type="text" name="name" placeholder="" class="layui-input">
                </div>
                <label class="layui-form-label">作者</label>
                <div class="layui-input-inline">
                    <input type="text" name="author" placeholder="" class="layui-input">
                </div>
                <label class="layui-form-label">状态</label>
                <div class="layui-input-inline">
                    <select name="active">
                        <option value="">全部</option>
                        <option value="1">启用</option>
                        <option value="0">禁用</option>
                    </select>
                </div>
                <button class="layui-btn layui-btn-md" lay-submit lay-filter="search">
                    <i class="layui-icon layui-icon-search"></i>
                    查询
                </button>
                <button type="reset" class="layui-btn layui-btn-primary layui-btn-md">
                    <i class="layui-icon layui-icon-refresh"></i>
                    重置
                </button>
            </div>
        </form>
    </div>
</div>

<!-- 数据表格 -->
<div class="layui-card">
    <div class="layui-card-body">
        <table id="themes-table" lay-filter="themes-table"></table>
    </div>
</div>

<!-- 卡片视图 -->
<div class="layui-card" id="card-view" style="display: none;">
    <div class="layui-card-body">
        <div class="layui-form-item" style="margin-bottom: 15px;">
            <div class="layui-row">
                <div class="layui-col-md6">
                    <div class="layui-form-mid layui-word-aux">
                        <i class="layui-icon layui-icon-tips"></i>
                        提示：点击状态标签可直接切换主题的启用/禁用状态
                    </div>
                </div>
                <div class="layui-col-md6" style="text-align: right;">
                    {% if authorize("system:themes:add") %}
                    <button class="layui-btn layui-btn-primary layui-btn-sm" onclick="add()">
                        <i class="layui-icon layui-icon-add-1"></i>
                        新增
                    </button>
                    {% endif %}
                    {% if authorize("system:themes:add") %}
                    <button class="layui-btn layui-btn-sm layui-btn-warm" onclick="uploadTheme()">
                        <i class="layui-icon layui-icon-upload"></i>
                        上传主题
                    </button>
                    {% endif %}
                    {% if authorize("system:themes:delete") %}
                    <button class="layui-btn layui-btn-sm" onclick="selectAllCards()">
                        <i class="layui-icon layui-icon-ok"></i>
                        全选
                    </button>
                    <button class="layui-btn layui-btn-sm" onclick="batchDeleteCards()">
                        <i class="layui-icon layui-icon-delete"></i>
                        批量删除
                    </button>
                    {% endif %}
                    <button class="layui-btn layui-btn-sm layui-btn-normal" onclick="toggleViewMode()">
                        <i class="layui-icon layui-icon-table" id="cardViewModeIcon"></i>
                        <span id="cardViewModeText">表格视图</span>
                    </button>
                </div>
            </div>
        </div>
        <div id="themes-cards" class="themes-cards-container"></div>
    </div>
</div>

<!-- 表格操作列模板 -->
<script type="text/html" id="toolbarDemo">
    {% if authorize("system:themes:add") %}
    <button class="layui-btn layui-btn-primary layui-btn-sm" lay-event="add">
        <i class="layui-icon layui-icon-add-1"></i>
        新增
    </button>
    {% endif %}
    {% if authorize("system:themes:delete") %}
    <button class="layui-btn layui-btn-sm" lay-event="batchDelete">
        <i class="layui-icon layui-icon-delete"></i>
        删除
    </button>
    {% endif %}
    <button class="layui-btn layui-btn-sm layui-btn-normal" lay-event="viewMode">
        <i class="layui-icon layui-icon-table" id="viewModeIcon"></i>
        <span id="viewModeText">表格视图</span>
    </button>
</script>

<!-- 操作列模板 -->
<script type="text/html" id="operationBar">
    {% if authorize("system:themes:edit") %}
    <button class="layui-btn layui-btn-xs" lay-event="edit"><i class="ppress-icon ppress-icon-edit"> 编辑</i>
    </button>
    <button class="layui-btn layui-btn-xs layui-btn-normal" lay-event="toggleActive">
        {% raw %}{{# if(d.active == 1) { }}{% endraw %}
        <i class="layui-icon layui-icon-ok"></i> 禁用
        {% raw %}{{# } else { }}{% endraw %}
        <i class="layui-icon layui-icon-close"></i> 启用
        {% raw %}{{# } }}{% endraw %}
    </button>
    {% endif %}
    {% if authorize("system:themes:delete") %}
    <button class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del"><i
            class="ppress-icon ppress-icon-ashbin"> 删除</i>
    </button>
    {% endif %}
</script>



<!-- 更新状态列模板 -->
<script type="text/html" id="hasUpdateTpl">
    {% raw %}{{# if(d.has_update == 1) { }}{% endraw %}
    <span class="layui-badge layui-bg-orange">有更新</span>
    {% raw %}{{# } else { }}{% endraw %}
    <span class="layui-badge layui-bg-gray">无更新</span>
    {% raw %}{{# } }}{% endraw %}
</script>

{% include 'system/common/footer.html' %}

<style>
/* 主题预览样式 */
.theme-preview {
    position: relative;
    display: inline-block;
    transition: all 0.3s ease;
}

.theme-preview:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 16px rgba(0,0,0,0.15);
}

.theme-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0,0,0,0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.3s ease;
    border-radius: 8px;
}

.theme-preview:hover .theme-overlay {
    opacity: 1;
}

.theme-overlay i {
    color: white;
    font-size: 24px;
}

.theme-name {
    padding: 5px 0;
}

.theme-author {
    padding: 5px 0;
}

/* 表格行样式 */
.layui-table-cell {
    height: auto !important;
    line-height: 1.5 !important;
    padding: 8px 15px !important;
}

/* 状态标签样式 */
.layui-badge {
    border-radius: 12px;
    padding: 4px 8px;
    font-size: 11px;
}

/* 操作按钮样式 */
.layui-btn-xs {
    padding: 2px 6px;
    font-size: 11px;
    border-radius: 3px;
}

/* 可点击状态标签样式 */
.clickable-status {
    transition: all 0.3s ease;
    user-select: none;
}

.clickable-status:hover {
    transform: scale(1.05);
    box-shadow: 0 2px 8px rgba(0,0,0,0.2);
}

.layui-badge.layui-bg-green.clickable-status:hover {
    background-color: #5FB878 !important;
}

.layui-badge.layui-bg-gray.clickable-status:hover {
    background-color: #999 !important;
}

/* 卡片视图样式 */
.themes-cards-container {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 20px;
    padding: 20px 0;
}

.theme-card {
    background: white;
    border-radius: 12px;
    box-shadow: 0 2px 12px rgba(0,0,0,0.1);
    overflow: hidden;
    transition: all 0.3s ease;
    position: relative;
}

.theme-card-checkbox {
    position: absolute;
    top: 10px;
    left: 10px;
    z-index: 10;
    background: transparent;
    border-radius: 4px;
    padding: 2px;
}

/* 自定义复选框样式 */
.theme-card-checkbox .layui-form-checkbox {
    background: transparent !important;
    border: 2px solid rgba(255,255,255,0.9) !important;
    border-radius: 6px !important;
    box-shadow: 0 2px 10px rgba(0,0,0,0.2) !important;
    transition: all 0.3s ease !important;
    backdrop-filter: blur(5px) !important;
}

.theme-card-checkbox .layui-form-checkbox:hover {
    border-color: #5FB878 !important;
    box-shadow: 0 4px 15px rgba(95,184,120,0.4) !important;
    transform: scale(1.05) !important;
}

.theme-card-checkbox .layui-form-checkbox[lay-skin="primary"] i {
    background-color: #5FB878 !important;
    border-radius: 3px !important;
    box-shadow: 0 1px 3px rgba(95,184,120,0.3) !important;
}

.theme-card-checkbox .layui-form-checkbox[lay-skin="primary"]:hover i {
    background-color: #4CAF50 !important;
    box-shadow: 0 2px 6px rgba(76,175,80,0.4) !important;
}

/* 未选中状态的样式 */
.theme-card-checkbox .layui-form-checkbox:not(.layui-form-checked) {
    background: rgba(255,255,255,0.1) !important;
    border-color: rgba(255,255,255,0.7) !important;
}

.theme-card-checkbox .layui-form-checkbox:not(.layui-form-checked):hover {
    background: rgba(255,255,255,0.2) !important;
    border-color: rgba(255,255,255,0.9) !important;
}

/* 确保复选框在深色背景下也能清晰显示 */
.theme-card-checkbox .layui-form-checkbox {
    position: relative !important;
}

.theme-card-checkbox .layui-form-checkbox::before {
    content: '';
    position: absolute;
    top: -2px;
    left: -2px;
    right: -2px;
    bottom: -2px;
    background: linear-gradient(45deg, rgba(255,255,255,0.1), rgba(255,255,255,0.05));
    border-radius: 8px;
    z-index: -1;
}

/* 适配不同主题背景 */
.theme-card:hover .theme-card-checkbox .layui-form-checkbox {
    border-color: rgba(255,255,255,1) !important;
    box-shadow: 0 4px 20px rgba(0,0,0,0.3) !important;
}

.theme-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgba(0,0,0,0.15);
}

.theme-card-image {
    position: relative;
    height: 180px;
    overflow: hidden;
}

.theme-card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.theme-card:hover .theme-card-image img {
    transform: scale(1.05);
}

.theme-card-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0,0,0,0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.theme-card:hover .theme-card-overlay {
    opacity: 1;
}

.theme-card-overlay i {
    color: white;
    font-size: 32px;
}

.theme-card-no-image {
    height: 180px;
    background: #f5f5f5;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #999;
    border: 2px dashed #ddd;
}

.theme-card-content {
    padding: 16px;
}

.theme-card-title {
    font-size: 16px;
    font-weight: bold;
    margin-bottom: 8px;
    color: #333;
}

.theme-card-description {
    font-size: 13px;
    color: #666;
    margin-bottom: 12px;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.theme-card-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
}

.theme-card-author {
    font-size: 12px;
    color: #999;
}

.theme-card-version {
    font-size: 11px;
    color: #666;
    background: #f0f0f0;
    padding: 2px 6px;
    border-radius: 10px;
}

.theme-card-status {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.theme-card-actions {
    display: flex;
    gap: 8px;
    margin-top: 12px;
}

.theme-card-actions .layui-btn {
    flex: 1;
    font-size: 11px;
    padding: 4px 8px;
}
</style>

<script>
layui.use(['table', 'form', 'layer'], function(){
    var table = layui.table;
    var form = layui.form;
    var layer = layui.layer;
    var $ = layui.jquery;
    
    // 全局变量
    var currentViewMode = 'card'; // 默认卡片视图
    var themesData = []; // 存储主题数据
    
    // 渲染表格
    var tableIns = table.render({
        elem: '#themes-table',
        url: '/admin/sys/themes/list',
        toolbar: '#toolbarDemo',
        defaultToolbar: ['filter', 'exports', 'print'],
        cols: [[
            {type: 'checkbox', fixed: 'left'},
            {field: 'screenshot', title: '主题预览', width: 200, fixed:"center", templet: function(d){
                if(d.screenshot) {
                    return '<div class="theme-preview" onclick="previewImage(this.querySelector(\'img\').src)">' +
                           '<img src="' + d.screenshot + '" alt="' + d.name + '" style="width:180px;height:120px;object-fit:cover;border-radius:8px;cursor:pointer;box-shadow:0 2px 8px rgba(0,0,0,0.1);">' +
                           '<div class="theme-overlay">' +
                           '<i class="layui-icon layui-icon-search"></i>' +
                           '</div>' +
                           '</div>';
                }
                return '<div class="theme-no-image" style="width:180px;height:120px;background:#f5f5f5;border-radius:8px;display:flex;align-items:center;justify-content:center;color:#999;border:2px dashed #ddd;">' +
                       '<i class="layui-icon layui-icon-picture" style="font-size:24px;"></i>' +
                       '</div>';
            }},
            {field: 'name', title: '主题名称', width: 150, templet: function(d){
                return '<div class="theme-name">' +
                       '<div style="font-weight:bold;margin-bottom:5px;">' + d.name + '</div>' +
                       '<div style="font-size:12px;color:#666;">' + (d.description || '暂无描述') + '</div>' +
                       '</div>';
            }},
            {field: 'author', title: '作者信息', width: 120, templet: function(d){
                return '<div class="theme-author">' +
                       '<div style="font-weight:bold;">' + (d.author || '未知') + '</div>' +
                       '<div style="font-size:12px;color:#666;">v' + (d.version || '1.0.0') + '</div>' +
                       '</div>';
            }},
            {field: 'active', title: '状态', width: 100, templet: function(d){
                if(d.active == 1) {
                    return '<span class="layui-badge layui-bg-green clickable-status" onclick="toggleActive(' + d.id + ')" style="cursor:pointer;">启用</span>';
                } else {
                    return '<span class="layui-badge layui-bg-gray clickable-status" onclick="toggleActive(' + d.id + ')" style="cursor:pointer;">禁用</span>';
                }
            }},
            {field: 'has_update', title: '更新', width: 80, templet: '#hasUpdateTpl'},
            {field: 'create_time', title: '创建时间', width: 200, templet: function(d){
                return '<div style="font-size:12px;">' + d.create_time + '</div>';
            }},
            {title: '操作', toolbar: '#operationBar', fixed: 'right'}
        ]],
        page: true,
        limit: 8,
        limits: [8, 16, 24, 32],
        height: 'full-220',
        size: 'lg',
        done: function(res) {
            // 保存数据用于卡片视图
            themesData = res.data || [];
            // 默认显示卡片视图
            if (currentViewMode === 'card') {
                $('#themes-table').parent().parent().hide();
                $('#card-view').show();
                window.renderCardView();
            }
        }
    });
    
    // 搜索功能
    form.on('submit(search)', function(data){
        tableIns.reload({
            where: data.field,
            page: {curr: 1}
        });
        return false;
    });
    
    // 表格工具栏事件
    table.on('toolbar(themes-table)', function(obj){
        var checkStatus = table.checkStatus(obj.config.id);
        switch(obj.event){
            case 'add':
                window.add();
                break;
            case 'batchDelete':
                var data = checkStatus.data;
                if(data.length === 0){
                    layer.msg('请选择要删除的数据', {icon: 2});
                    return;
                }
                var ids = data.map(function(item){ return item.id; });
                window.batchDelete(ids);
                break;
            case 'viewMode':
                window.toggleViewMode();
                break;
        }
    });
    
    // 表格行工具事件
    table.on('tool(themes-table)', function(obj){
        var data = obj.data;
        if(obj.event === 'edit'){
            window.edit(data.id);
        } else if(obj.event === 'del'){
            layer.confirm('确定删除此主题？', function(index){
                window.delete(data.id);
                layer.close(index);
            });
        } else if(obj.event === 'toggleActive'){
            window.toggleActive(data.id);
        }
    });
    
    // 新增主题
    window.add = function(){
        layer.open({
            type: 2,
            title: '新增主题',
            shadeClose: true,
            shade: 0.8,
            area: ['800px', '600px'],
            content: '/admin/sys/themes/add'
        });
    };
    
    // 编辑主题
    window.edit = function(id){
        layer.open({
            type: 2,
            title: '编辑主题',
            shadeClose: true,
            shade: 0.8,
            area: ['800px', '600px'],
            content: '/admin/sys/themes/edit/' + id
        });
    };
    
    // 删除主题
    window.delete = function(id){
        $.ajax({
            url: '/admin/sys/themes/delete/' + id,
            type: 'POST',
            success: function(res){
                if(res.success){
                    layer.msg(res.msg, {icon: 1});
                    tableIns.reload();
                    if (currentViewMode === 'card') {
                        window.renderCardView();
                    }
                } else {
                    layer.msg(res.msg, {icon: 2});
                }
            }
        });
    };
    
    // 批量删除
    window.batchDelete = function(ids){
        layer.confirm('确定删除选中的 ' + ids.length + ' 个主题？', function(index){
            $.ajax({
                url: '/admin/sys/themes/batch_delete',
                type: 'POST',
                contentType: 'application/json',
                data: JSON.stringify({ids: ids}),
                success: function(res){
                    if(res.success){
                        layer.msg(res.msg, {icon: 1});
                        tableIns.reload();
                        if (currentViewMode === 'card') {
                            window.renderCardView();
                        }
                    } else {
                        layer.msg(res.msg, {icon: 2});
                    }
                }
            });
            layer.close(index);
        });
    };
    
    // 上传主题
    window.uploadTheme = function(){
        layer.open({
            type: 1,
            title: '上传主题',
            area: ['500px', '300px'],
            content: `
                <div class="layui-form" style="padding: 20px;">
                    <div class="layui-form-item">
                        <label class="layui-form-label">主题文件</label>
                        <div class="layui-input-block">
                            <input type="file" id="themeFile" accept=".zip" style="display: none;">
                            <button type="button" class="layui-btn layui-btn-primary" id="selectFileBtn">
                                <i class="layui-icon layui-icon-upload"></i>
                                选择ZIP文件
                            </button>
                            <div id="fileInfo" style="margin-top: 10px; display: none;">
                                <div class="layui-form-mid layui-word-aux">
                                    <i class="layui-icon layui-icon-ok"></i>
                                    <span id="fileName"></span>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <div class="layui-input-block">
                            <div class="layui-form-mid layui-word-aux">
                                <i class="layui-icon layui-icon-tips"></i>
                                请选择包含theme.json的主题ZIP文件，系统将自动读取主题信息
                            </div>
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <div class="layui-input-block">
                            <button type="button" class="layui-btn" id="submitUploadBtn">
                                <i class="layui-icon layui-icon-upload"></i>
                                上传主题
                            </button>
                            <button type="button" class="layui-btn layui-btn-primary" id="cancelUploadBtn">
                                取消
                            </button>
                        </div>
                    </div>
                </div>
            `,
            success: function(){
                // 绑定选择文件按钮事件
                $('#selectFileBtn').click(function(){
                    $('#themeFile').click();
                });
                
                // 监听文件选择
                $('#themeFile').change(function(){
                    var file = this.files[0];
                    if(file){
                        if(file.name.toLowerCase().endsWith('.zip')){
                            $('#fileName').text(file.name + ' (' + (file.size / 1024 / 1024).toFixed(2) + ' MB)');
                            $('#fileInfo').show();
                        } else {
                            layer.msg('请选择ZIP格式的文件', {icon: 2});
                            this.value = '';
                        }
                    }
                });
                
                // 绑定提交按钮事件
                $('#submitUploadBtn').click(function(){
                    submitThemeUpload();
                });
                
                // 绑定取消按钮事件
                $('#cancelUploadBtn').click(function(){
                    layer.closeAll();
                });
            }
        });
    };
    
    // 提交主题上传
    window.submitThemeUpload = function(){
        var file = document.getElementById('themeFile').files[0];
        
        if(!file){
            layer.msg('请选择主题文件', {icon: 2});
            return;
        }
        
        // 检查文件大小（限制为50MB）
        if(file.size > 50 * 1024 * 1024){
            layer.msg('文件大小不能超过50MB', {icon: 2});
            return;
        }
        
        var formData = new FormData();
        formData.append('file', file);
        
        // 显示上传进度
        var loadIndex = layer.load(1, {shade: [0.3, '#000']});
        
        $.ajax({
            url: '/admin/sys/themes/upload_theme',
            type: 'POST',
            data: formData,
            processData: false,
            contentType: false,
            success: function(res){
                layer.close(loadIndex);
                if(res.success){
                    layer.msg(res.msg, {icon: 1});
                    layer.closeAll();
                    // 刷新数据
                    tableIns.reload();
                    if (currentViewMode === 'card') {
                        window.renderCardView();
                    }
                } else {
                    layer.msg(res.msg, {icon: 2});
                }
            },
            error: function(){
                layer.close(loadIndex);
                layer.msg('上传失败，请重试', {icon: 2});
            }
        });
    };
    
    // 卡片视图全选
    window.selectAllCards = function(){
        var allChecked = $('.theme-card input[type="checkbox"]:checked').length === $('.theme-card input[type="checkbox"]').length;
        if(allChecked) {
            // 如果全部选中，则取消全选
            $('.theme-card input[type="checkbox"]').prop('checked', false);
        } else {
            // 否则全选
            $('.theme-card input[type="checkbox"]').prop('checked', true);
        }
        form.render('checkbox');
    };
    
    // 卡片视图批量删除
    window.batchDeleteCards = function(){
        var checkedIds = [];
        $('.theme-card input[type="checkbox"]:checked').each(function(){
            checkedIds.push($(this).val());
        });
        
        if(checkedIds.length === 0){
            layer.msg('请选择要删除的主题', {icon: 2});
            return;
        }
        
        layer.confirm('确定删除选中的 ' + checkedIds.length + ' 个主题？', function(index){
            $.ajax({
                url: '/admin/sys/themes/batch_delete',
                type: 'POST',
                contentType: 'application/json',
                data: JSON.stringify({ids: checkedIds}),
                success: function(res){
                    if(res.success){
                        layer.msg(res.msg, {icon: 1});
                        tableIns.reload();
                        if (currentViewMode === 'card') {
                            window.renderCardView();
                        }
                    } else {
                        layer.msg(res.msg, {icon: 2});
                    }
                }
            });
            layer.close(index);
        });
    };
    
    // 切换启用状态
    window.toggleActive = function(id){
        // 显示加载状态
        layer.load(1, {shade: [0.3, '#000']});
        
        $.ajax({
            url: '/admin/sys/themes/toggle_active/' + id,
            type: 'POST',
            success: function(res){
                layer.closeAll('loading');
                if(res.success){
                    layer.msg(res.msg, {icon: 1, time: 1500});
                    tableIns.reload();
                    if (currentViewMode === 'card') {
                        window.renderCardView();
                    }
                } else {
                    layer.msg(res.msg, {icon: 2});
                }
            },
            error: function(){
                layer.closeAll('loading');
                layer.msg('操作失败，请重试', {icon: 2});
            }
        });
    };
    
    // 预览图片
    window.previewImage = function(src){
        layer.photos({
            photos: {
                "data": [{
                    "src": src,
                    "alt": "主题预览"
                }]
            },
            anim: 5,
            shade: 0.8,
            shadeClose: true,
            closeBtn: 1,
            skin: 'layui-layer-molv'
        });
    };
    
    // 切换视图模式
    window.toggleViewMode = function() {
        if (currentViewMode === 'card') {
            // 切换到表格视图
            $('#card-view').hide();
            $('#themes-table').parent().parent().show();
            currentViewMode = 'table';
            $('#viewModeIcon').removeClass('layui-icon-table').addClass('layui-icon-app');
            $('#viewModeText').text('卡片视图');
            $('#cardViewModeIcon').removeClass('layui-icon-table').addClass('layui-icon-app');
            $('#cardViewModeText').text('卡片视图');
        } else {
            // 切换到卡片视图
            $('#themes-table').parent().parent().hide();
            $('#card-view').show();
            window.renderCardView();
            currentViewMode = 'card';
            $('#viewModeIcon').removeClass('layui-icon-app').addClass('layui-icon-table');
            $('#viewModeText').text('表格视图');
            $('#cardViewModeIcon').removeClass('layui-icon-app').addClass('layui-icon-table');
            $('#cardViewModeText').text('表格视图');
        }
    };
    
    // 渲染卡片视图
    window.renderCardView = function() {
        var cardsHtml = '';
        themesData.forEach(function(theme) {
            var imageHtml = theme.screenshot ? 
                '<div class="theme-card-image" onclick="previewImage(\'' + theme.screenshot + '\')">' +
                '<img src="' + theme.screenshot + '" alt="' + theme.name + '">' +
                '<div class="theme-card-overlay">' +
                '<i class="layui-icon layui-icon-search"></i>' +
                '</div>' +
                '</div>' :
                '<div class="theme-card-no-image">' +
                '<i class="layui-icon layui-icon-picture" style="font-size:48px;"></i>' +
                '</div>';
            
            var statusHtml = theme.active == 1 ? 
                '<span class="layui-badge layui-bg-green clickable-status" onclick="toggleActive(' + theme.id + ')" style="cursor:pointer;">启用</span>' : 
                '<span class="layui-badge layui-bg-gray clickable-status" onclick="toggleActive(' + theme.id + ')" style="cursor:pointer;">禁用</span>';
            
            var updateHtml = theme.has_update == 1 ? 
                '<span class="layui-badge layui-bg-orange">有更新</span>' : 
                '<span class="layui-badge layui-bg-gray">无更新</span>';
            
            cardsHtml += '<div class="theme-card" data-id="' + theme.id + '">' +
                '<div class="theme-card-checkbox">' +
                '<input type="checkbox" lay-skin="primary" value="' + theme.id + '" lay-filter="cardCheckbox">' +
                '</div>' +
                imageHtml +
                '<div class="theme-card-content">' +
                '<div class="theme-card-title">' + theme.name + '</div>' +
                '<div class="theme-card-description">' + (theme.description || '暂无描述') + '</div>' +
                '<div class="theme-card-meta">' +
                '<div class="theme-card-author">' + (theme.author || '未知') + '</div>' +
                '<div class="theme-card-version">v' + (theme.version || '1.0.0') + '</div>' +
                '</div>' +
                '<div class="theme-card-status">' +
                statusHtml + updateHtml +
                '</div>' +
                '<div class="theme-card-actions">' +
                (window.authorize && window.authorize("system:themes:edit") ? 
                    '<button class="layui-btn layui-btn-xs" onclick="edit(' + theme.id + ')">编辑</button>' +
                    '<button class="layui-btn layui-btn-xs layui-btn-normal" onclick="toggleActive(' + theme.id + ')">' +
                    (theme.active == 1 ? '禁用' : '启用') + '</button>' : '') +
                (window.authorize && window.authorize("system:themes:delete") ? 
                    '<button class="layui-btn layui-btn-xs layui-btn-danger" onclick="delete(' + theme.id + ')">删除</button>' : '') +
                '</div>' +
                '</div>' +
                '</div>';
        });
        
        $('#themes-cards').html(cardsHtml);
        
        // 重新渲染表单元素
        form.render('checkbox');
    };
    
    // 绑定按钮事件
    $('#add').click(function(){
        window.add();
    });
    
    $('#batchDelete').click(function(){
        var checkStatus = table.checkStatus('themes-table');
        var data = checkStatus.data;
        if(data.length === 0){
            layer.msg('请选择要删除的数据', {icon: 2});
            return;
        }
        var ids = data.map(function(item){ return item.id; });
        window.batchDelete(ids);
    });
    
    // 监听卡片复选框事件
    form.on('checkbox(cardCheckbox)', function(data){
        // 可以在这里添加选中状态的逻辑
        console.log('卡片复选框状态变化:', data.elem.checked, data.elem.value);
    });
});
</script>

</body>
</html> 